<template>
  <zm-panel title="提成公式配置" :visible.sync="value" @change="close">
    <el-form label-width="80px" :model="form" :rules="formRule" ref="form">
      <!-- 实物提成配置 -->
      <template v-if="obj.productTypeValue === '6'">
        <el-alert title="销售单价等于最低销售单价" type="warning" :closable="false" class="mb10">
        </el-alert>
        <el-form-item label="提成比例" prop="proportionOne">
          <span>回款金额 *</span>
          <zm-input class="w150" v-model="form.proportionOne" type="number" clearable>
            <template slot="append">%</template>
          </zm-input>
          <span>* 逾期天数%</span>
        </el-form-item>
        <el-alert title="销售单价高于最低销售单价" type="warning" :closable="false" class="mb10">
        </el-alert>
        <el-form-item label="提成比例" prop="proportionTwo">
          <span class="vt">( 回款金额 *</span>
          <zm-input class="w150" v-model="form.proportionTwo" type="number" clearable>
            <template slot="append">%</template>
          </zm-input>
          <span class="vt">+（实际应收-最低销售单价*剩余数量-剩余运费总额)*回款金额 / 实际应收 *</span>
          <el-form-item label="" prop="proportionThree" class="vt">
            <zm-input class="w150" v-model="form.proportionThree" type="number" clearable>
              <template slot="append">%</template>
            </zm-input>
          </el-form-item>
          <span>)* 逾期天数%</span>
        </el-form-item>
      </template>
      <template v-if="obj.productTypeValue === '4'">
        <el-alert title="包场提成公式：可选择影院分组或指定影院配置不同的提成公式" type="warning" :closable="false" class="mb10">
        </el-alert>

        <zm-form :model="searchForm" ref="searchForm" inline>
          <zm-form-item>
            <zm-input
              v-model="searchForm.cinemaName"
              placeholder="请输入影院名称"
              clearable
            ></zm-input>
          </zm-form-item>
          <zm-form-item>
              <el-cascader placeholder="请选择影院分组" @change="cinemaGroupIdChange" class="w300" v-model="form.cinemaGroupId" collapse-tags :options="cinemaGroupList" :props="{value: 'id',label:'name', multiple:true}" :clearable="true"></el-cascader>
          </zm-form-item>
            <zm-form-item>
          <zm-button t="search" @click="onSearch"></zm-button>
            </zm-form-item>
          </zm-form>

        <el-form-item label="提成配置" prop="proportionOne">
          <el-button type="primary" @click="addSetting" :disabled="isAllCinema">新增</el-button>
        </el-form-item>
        <zm-table-data :data="tableParams.data" :columns="columns" :fetch="loadList" :table-params="tableParams"></zm-table-data>
      </template>
    </el-form>
    <div slot="footer" class="tr">
      <el-button @click="close">{{obj.productTypeValue === '6' ? '取 消' : '关 闭'}}</el-button>
      <el-button type="primary" @click="submit" v-if="obj.productTypeValue === '6'">确 定</el-button>
    </div>
    <books-edit v-if="booksExpressionParams.visible" v-model="booksExpressionParams.visible" :obj="booksExpressionParams.obj" @after-save="afterAdd"></books-edit>
  </zm-panel>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import overdueRuleApi from '@/api/src/overdueRule'
import commissionRuleApi from '@/api/src/commissionRule'
import BooksEdit from './booksExpressionEdit'
import tableMixin from '@/mixins/zmTableMixin'
import { bookColumns } from './const'
import { STRING_NUMBER } from '@/utils/validateRule'
import {getCinemaGroupList} from '@/api/src/cloud'
export default {
  name: 'GoodsExpressionEdit',
  components: { BooksEdit },
  mixins: [panelMixin, tableMixin],
  props: {
    obj: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      searchForm: {
        cinemaName: '',
        cinemaGroupId: ''
      },
      cinemaGroupList: [],
      form: {
        proportionOne: '',
        proportionTwo: '',
        proportionThree: '',
        relationType: '-1', // 影院数据：-1 全部影院 1 影院分组 2 指定影院
        relationId: ''
      },
      formRule: {
        proportionOne: [
          {
            required: true,
            message: '请输入提成比例!'
          },
          { validator: STRING_NUMBER, trigger: 'blur' }
        ],
        proportionTwo: [{
          required: true,
          message: '请输入提成比例!'
        }, { validator: STRING_NUMBER, trigger: 'blur' }],
        proportionThree: [{
          required: true,
          message: '请输入提成比例!'
        }, { validator: STRING_NUMBER, trigger: 'blur' }]
      },
      booksExpressionParams: {
        visible: false
      }
    }
  },
  computed: {
    columns () {
      return bookColumns(this)
    },
    isAllCinema () {
      // 选择了全部影院 禁止新增
      if (this.tableParams.data && this.tableParams.data.length > 0) {
        return this.tableParams.data.some(item => {
          return item.relationId === '-1'
        })
      }
      return false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  created () {
    this.getDetail()
  },
  methods: {
    async init () {
      const res = await getCinemaGroupList()
      this.cinemaGroupList = res.list
    },
    cinemaGroupIdChange (e) {
      let list = e.map(item => {
        return item[1]
      })
      this.searchForm.cinemaGroupId = list.join(',')
      console.log(this.searchForm)
    },
    async getDetail () {
      // 订单类型：4包场，6 实物
      if (this.obj.productTypeValue === '6') {
        const res = await commissionRuleApi.detail({ orderType: '6' })
        this.form = res
      }
    },
    async loadList () {
      const res = await commissionRuleApi.getList(this.assignQuery(this.searchForm))
      this.initialTableData(res.list, res.count)
    },
    addSetting () {
      this.booksExpressionParams = {
        visible: true,
        obj: {}
      }
    },
    afterAdd (val) {
      // 包场回传
      this.loadList()
    },
    onEdit (row) {
      this.booksExpressionParams = {
        visible: true,
        obj: row
      }
    },
    async onDel (row) {
      await commissionRuleApi.delOne({ id: row.id })
      this.loadList()
    },
    async submit () {
      let _valid = false
      await this.$refs.form.validate(valid => {
        _valid = valid
      })
      if (!_valid) {
        return
      }
      await commissionRuleApi.createOrUpdate(this.form)

      this.$emit('after-save')
      this.$msg.success()
      this.close()
    }
  }
}
</script>
